<template>
  <div>
    <div class="container main">
      <div>

        <div class="row">
          <div class="col-md-8">
            <div class="active-tab">
                <span  v-for="(item ,index) in tabD"
                       :class="{'tabActive':tabcur === index}"
                       @click="tabItme(item,index)"> {{ item }}</span>

            </div>
            <div class="brand_left hot_BJ">

              <div class="givenchy ">
                <div class="givenchy_time identical">
                  <ul class="clearfix">
                    <li>时间筛选：</li>
                    <li
                      v-for="(item ,index) in timeD"
                      :class="{'timeactive':timecur === index}"
                      @click="TimeItme(item,index)"
                    >
                      {{ item }}
                    </li>
                  </ul>
                </div>
                <div class="givenchy_PX identical">
                  <ul class="clearfix ">
                    <li>排序：</li>
                    <li
                      v-for="(item,index) in pxD"
                      :class="{'timeactive':hotcur === index}"
                      @click="HotItme(item,index)"
                    >
                      {{ item }}
                    </li>
                  </ul>
                </div>
              </div>
              <!--  -->
              <div class="givenchy_message">

                <div class="active-img">
                  <router-link :to="{path:'/Pages/CorporateCulture/UnionActive'}">
                  <img src="../../../static/images/hd_p4.png">
                  <p>
                    高新区（含同翔产业基地）举
                    行第二季度...
                  </p>
                  </router-link>
                </div>
                <div class="active-img">
                  <img src="../../../static/images/hd_p4.png">
                  <p>
                    高新区（含同翔产业基地）举
                    行第二季度...
                  </p>

                </div>
                <div class="active-img">
                  <img src="../../../static/images/hd_p4.png">
                  <p>
                    高新区（含同翔产业基地）举
                    行第二季度...
                  </p>

                </div>
                <div class="active-img">
                  <img src="../../../static/images/hd_p4.png">
                  <p>
                    高新区（含同翔产业基地）举
                    行第二季度...
                  </p>

                </div>
                <div class="active-img">
                  <img src="../../../static/images/hd_p4.png">
                  <p>
                    高新区（含同翔产业基地）举
                    行第二季度...
                  </p>

                </div>
                <div class="active-img">
                  <img src="../../../static/images/hd_p4.png">
                  <p>
                    高新区（含同翔产业基地）举
                    行第二季度...
                  </p>

                </div>
                <div class="active-img">
                  <img src="../../../static/images/hd_p4.png">
                  <p>
                    高新区（含同翔产业基地）举
                    行第二季度...
                  </p>

                </div>
                <div class="active-img">
                  <img src="../../../static/images/hd_p4.png">
                  <p>
                    高新区（含同翔产业基地）举
                    行第二季度...
                  </p>

                </div>
                <div class="active-img">
                  <img src="../../../static/images/hd_p4.png">
                  <p>
                    高新区（含同翔产业基地）举
                    行第二季度...
                  </p>

                </div>

              </div>
              <!-- 分页 -->
              <pagination :msg="page" @refreshList="onRefresList"></pagination>
            </div>
          </div>
          <div class="col-md-4">
            <div class="brand_right hot_BJ">
              <div class="consultation"><span>活动资讯</span><span><a href="#">更多》</a></span></div>
              <div class="info-img-list">
                <div class="info-img-item">
                  <div class="span-ra"><img src="../../../static/images/hd_p4.png">
                  <span>园区高企专场培训季-系列十四</span>
                  </div>
                  <div><span>108次阅读</span><span>2019-04-04  17:32:08</span></div>
                </div>
                <div class="info-img-item">
                  <div class="span-ra"><img src="../../../static/images/hd_p4.png">
                    <span>园区高企专场培训季-系列十四</span>
                  </div>
                  <div><span>108次阅读</span><span>2019-04-04  17:32:08</span></div>
                </div>
                <div class="info-img-item">
                  <div class="span-ra"><img src="../../../static/images/hd_p4.png">
                    <span>园区高企专场培训季-系列十四</span>
                  </div>
                  <div><span>108次阅读</span><span>2019-04-04  17:32:08</span></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <br /><br /><br />
    </div>
  </div>
</template>

<script>
  import pagination from '../../views/localPage/pagination'
    export default {
        name: "Home",
      components:{pagination},
      data(){
        return{
          page:{
            pagesize:4,
            total:900,
          },
          timecur: 0,
          hotcur: 0,
          tabcur:0,
          timeD: ["不限", "最近一周", "最近一月"],
          tabD: ["企业活动", "工会活动"],
          pxD: ["时间", "热度"],
        }
      },
      methods: {
        // 时间筛选
        TimeItme(item, index) {
          this.timecur = index;
        },
        // 排序
        HotItme(item, index) {
          this.hotcur = index;
        },
        tabItme(item, index) {
      this.tabcur = index;
    },
        onRefresList(val){
          console.log(val)
        }
      }
    }
</script>

<style scoped>
.main{
  padding-top: 50px;
}
.givenchy{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100px;
  padding: 20px;
}
.identical li{
  float: left;
  padding: 0 10px;
  height: 30px;
}
.identical .timeactive{
  color: #1575f9;
}
.givenchy_message{
  height: 250px;
  border-bottom: 1px solid #e0e0e0;
}
.givenchy_message,.givenchy_message .massage_read{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.givenchy_message .massage_img{
  width: 247px;
}
.givenchy_message .massage_img img{
  width: 100%;
}
.givenchy_message .massage_text{width: calc(100% - 350px);padding: 0 20px;}
.givenchy_message .massage_text p{
  color: #666666;
}
.givenchy_message .massage_text>h6{
  font-size: 20px;
  font-weight:600;
  color: #333333;
}
.givenchy_message .massage_read{
  font-size: 12px ;
  color: #999999;
}
.givenchy_message .massage_read i{
  width: 18px;
  height: 18px;
  display: inline-block;
  margin-right: 5px;
}
.givenchy_message .massage_read i img{
  width: 100%;
  height: 100%;
}
.givenchy_message .massage_btn{
  width: 120px;
}
.active-tab{background: #ffffff;
margin-bottom: 40px;}
  .active-tab span{
    display: inline-block;
    text-align: center;
    width:365px ;
    height: 60px;
    line-height: 60px;
  }
  .tabActive{
    background:linear-gradient(0deg,rgba(0,96,255,1),rgba(73,206,255,1));
    color: #ffffff;
  }
.active-img {
  width: 220px;
}
  .active-img img{
    width: 100%;
    height: 160px;
  }
  .active-img p{
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .givenchy_message{
    flex-wrap:  wrap;
    height: auto;

  }
  .consultation{
    display: flex;
    justify-content: space-between;
  }
.brand_right{
  padding: 17px 10px;
}
  .info-img-item{
    width: 300px;
    margin: 20px auto;
  }
  .info-img-item img{
    width: 100%;
  }
  .span-ra{
    position: relative;
  }
.span-ra span{
  position: absolute;
  background:rgba(0,0,0,1);
  opacity:0.6;
  text-align: center;
  bottom: 0;
  color: #FFFFFFFF;
  display: inline-block;
  width: 100%;
}
</style>
